<template>
  <div>
    <div class="echart-con" v-for="item in chartList">
      <e-charts v-for="list in item" :key="list.id" class="box"
                :style="'flex: 1 0 auto; flex-basis:'+form.content.boxWidth+'px;'"
                :options="list"
                :autoResize="true" ref="chart"></e-charts>
    </div>
  </div>
</template>

<script>
  import echartType from '../../mixins/echartType.js';
  import ECharts from 'vue-echarts/components/ECharts.vue';

  export default {
    name: 'EchartPie',
    props: ['form'],
    mixins: [echartType],
    components: {ECharts},
    methods: {
      init() {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (!Array.isArray(this.form.originalData)) {
            return {};
          }
          let option = JSON.parse(JSON.stringify(this.form));
          option.tooltip = this.form.tooltip;
          option.xAxis.show = false;
          option.yAxis.show = false;

          let axisX = this.form.plot.category[0] ? this.axisFun(this.form.plot.category[0].name) : [];
          this.chartList = [];

          if (this.form.plot.value.length === 0 || this.form.plot.category.length === 0) {
            return false;
          } else {
            this.form.plot.value.forEach(valueCur => {
              let chartData = [];
              if (this.form.plot.category.length > 1) {
                axisX.forEach(item => {
                  let obj = {};
                  let pieOptions = this.pieData(this.form.plot.category, valueCur, item);
                  obj = Object.assign({}, option, pieOptions);
                  chartData.push(obj);
                });

              } else {
                let obj = {};
                let pieOptions = this.pieData(this.form.plot.category, valueCur);
                obj = Object.assign({}, option, pieOptions);
                chartData.push(obj);
              }
              this.chartList.push(chartData);
            });
          }
        }, 50);
      },
      pieData(categoryArr, valueObj, current) {
        let axisX = categoryArr[0] ? this.axisFun(categoryArr[0].name) : [];
        let axisY = categoryArr[1] ? this.axisFun(categoryArr[1].name) : [];
        let radius = '45%';
        let roseType = false;
        switch (this.form.echart.pie) {
          case 'default':
            radius = '45%';
            break;
          case 'annular':
            radius = ['25%', '45%'];
            break;
          case 'radius':
            roseType = 'radius';
            break;
          case 'area':
            roseType = 'area';
            break;
        }
        let orient = 'horizontal';
        let top = 'top';
        let left = 'left';
        switch (this.form.legend.location) {
          case '0':
            orient = 'horizontal';
            top = 'top';
            left = 'left';
            break;
          case '1':
            orient = 'horizontal';
            top = 'top';
            left = 'center';
            break;
          case '2':
            orient = 'horizontal';
            top = 'top';
            left = 'right';
            break;
          case '3':
            orient = 'vertical';
            top = 'middle';
            left = 'left';
            break;
          case '4':
            orient = 'vertical';
            top = 'middle';
            left = 'right';
            break;
          case '5':
            orient = 'horizontal';
            top = 'bottom';
            left = 'left';
            break;
          case '6':
            orient = 'horizontal';
            top = 'bottom';
            left = 'center';
            break;
          case '7':
            orient = 'horizontal';
            top = 'bottom';
            left = 'right';
            break;
        }
        let pieOption = {
          legend: {
            show: this.form.legend.show,
            type: this.form.legend.type,
            orient: orient,
            top: top,
            left: left,
            data: []
          },
          series: []
        };
        if (axisY.length === 0) {
          pieOption.legend.data = axisX;
          let obj = {
            label: {
              show: true
            },
            name: current,
            type: 'pie',
            radius: radius,
            center: ['50%', '40%'],
            roseType: roseType,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: []
          };
          let arr = [];
          axisX.forEach(item => {
            this.form.originalData.forEach((y, index) => {
              if (y[categoryArr[0].name] === item) {
                arr[index] = {
                  name: item,
                  value: y[valueObj.name]
                };
              }
            });
          });
          obj.data = arr;
          pieOption.series.push(obj);
        } else {
          pieOption.legend.data = axisY;
          let arr = [];
          this.form.originalData.forEach(y => {
            axisY.forEach((z, zIndex) => {
              if (y[categoryArr[0].name] === current && y[categoryArr[1].name] === z) {
                arr[zIndex] = {
                  name: z,
                  value: y[valueObj.name]
                };
              }
            });
          });

          let obj = {
            label: {
              show: true
            },
            name: current,
            type: 'pie',
            radius: radius,
            center: ['50%', '40%'],
            roseType: roseType,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            markPoint: {
              silent: true,
              symbol: 'triangle',
              itemStyle: {
                color: 'transparent'
              },
              data: [
                {
                  x: '50%',
                  y: '50%',
                  value: current,
                  label: {
                    show: true,
                    position: 'bottom',
                    distance: 80,
                    formatter: function (params) {
                      return params.value;
                    },
                    color: '#000'
                  }
                }
              ]
            },
            data: arr
          };
          pieOption.series.push(obj);
        }
        return pieOption;
      }
    }
  };
</script>
